<template>
  <div class="homePageWrap examWarp">
    <div class="homePageTitle">
      <div class="logoWrap"></div>
      <h1 class="titleWarp">
        {{ systemName }}
      </h1>
    </div>
    <div class="mainWrap">
      <div class="loginWrap">
        <el-form
          ref="loginFormRef"
          :model="examLogin"
          :rules="loginRules"
          class="login-form"
        >
          <!-- 身份证号 -->
          <el-form-item prop="idCard" label="身份证号：">
            <div class="flex-y-center w-full">
              <el-input
                ref="idCard"
                v-model="examLogin.idCard"
                name="idCard"
                size="large"
              />
            </div>
          </el-form-item>

          <!-- 考生姓名 -->
          <el-form-item prop="name" label="考生姓名：">
            <div class="flex-y-center w-full">
              <el-input v-model="examLogin.name" name="name" size="large" />
            </div>
          </el-form-item>

          <!-- 登录按钮 -->
          <el-button
            :loading="loading"
            type="primary"
            size="large"
            class="w-full btnClass"
            @click.prevent="handleExamLogin"
            >登 录
          </el-button>
        </el-form>
      </div>
    </div>
    <div class="footerWrap">技术支持：广州玉才科技有限公司</div>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useUserStore } from "@/store";
import { s } from "vite/dist/node/types.d-aGj9QkWt";
defineOptions({
  name: "ELogin",
  inheritAttrs: false,
});

const userStore = useUserStore();

const router = useRouter();
const route = useRoute();
const loading = ref(false); // 按钮loading
const loginFormRef = ref(ElForm); // 登录表单ref
let systemName = ref(); //系统名称
const examLogin = ref<any>({
  matchId: route.query?.matchID || 1,
  name: "",
  idCard: "",
});

const title = computed(() => {
  return (
    route.query?.title || "金砖大赛食品安全快速检测赛项系统理论考核（高职组）"
  );
});

const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: " ",
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: " ",
      },
      {
        min: 6,
        message: " ",
        trigger: "blur",
      },
    ],
    idCard: [
      {
        required: true,
        trigger: "blur",
        message: " ",
      },
    ],
    name: [
      {
        required: true,
        trigger: "blur",
        message: " ",
      },
    ],
  };
});

/**
 * 考试登录
 */
function handleExamLogin() {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      userStore
        .examLogin(examLogin.value)
        .then((res: any) => {
          console.log("eeeeeeeeeeeeeeeeee", res);
          // 跳转到考前必读
          router.replace(`/requiredReading`);
          return;
        })
        .catch((err) => {
          console.error(err);
        })
        .finally(() => {
          loading.value = false;
        });
      return;
    }
  });
}

onMounted(() => {
  //获取系统名称
  let id = examLogin.value.matchId;
  sessionStorage.setItem("matchId", id);
  function getSystemName() {
    return request({
      url: "/examApi/match/get",
      method: "get",
      params: {
        id,
      },
    });
  }
  getSystemName().then((res: any) => {
    let { matchName, matchGroup } = res.data;
    systemName.value = matchName + "（" + matchGroup + "）";
    sessionStorage.setItem("systemName", systemName.value);
  });
});
</script>

<style lang="scss" scoped></style>
